<!--
 * @Descripttion: 
 * @Author: White
 * @Date: 2025-01-09 13:30:31
 * @LastEditTime: 2025-01-09 14:19:49
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Website{% endblock %}</title>
    <style>
        body {
            display: flex;
            flex-direction: row;
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
        #header {
            background-color: #333;
            color: white;
            /* padding: 10px; */
            text-align: center;
            width: 100%;
        }
        #sidebar {
            width: 10%;
            background-color: #f4f4f4;
            /* padding: 20px; */
            box-sizing: border-box;
            height: 90vh;
        }
        #content {
            flex-grow: 1;
            /* padding: 20px; */
            box-sizing: border-box;
            border-left: 1px solid #ccc;
            height: 90%;
        }

    </style>
</head>
<body>
    <div style="display: flex;flex-direction: column;width: 100%;height: 100%;">
        <div id="header" style="height: 10%;">
            <h1>My Website Header</h1>
        </div>
        <div style="display: flex;height: 90%;">
            <div id="sidebar">
                <nav>
                    <ul>
                        <li><a href="#" class="nav-link" onclick="loadPage('page1.html')">Page 1</a></li>
                        <li><a href="#" class="nav-link" onclick="loadPage('page2.html')">Page 2</a></li>
                        <li><a href="#" class="nav-link" onclick="loadPage('page3.html')">Page 3</a></li>
                    </ul>
                </nav>
            </div>
            <div id="content">
                <div id="content-body"></div>
            </div>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.nav-link').click(function(event) {
                event.preventDefault();
                var page = $(this).attr('data-page');
                $.ajax({
                    url: '/content/' + page,
                    method: 'GET',
                    success: function(data) {
                        $('#content-title').text(data.title);
                        $('#content-body').html(data.content);
                    },
                    error: function(xhr, status, error) {
                        alert('Error loading content: ' + error);
                    }
                });
            });
        });
    </script>
</body>
</html>